<template>
	<view class="orderList">
		<view class="orderListItem" v-for="(item,index) in props.list" :key="index">
			<view class="topItem">
				<view class="left">
					<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item.storeLogo" mode="aspectFill"></image>
					{{item.storeName}}

				</view>
				<view class="right">
					{{item.orderState.name}}
				</view>
			</view>
			<view class="listItem">
				<view class="left">
					<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item.fileId" mode="aspectFill">
					</image>
				</view>
				<view class="center">
					<text class="ellipsis_2">{{item.productName}}</text>
					<view class="">
						{{item.skuName}}
					</view>
					<!-- <view class="attr">
						<text v-for="(item2,index2) in props.item.attrs || []"
							:key="index2">{{item2.propertyName}}：{{item2.propertyValue}};</text>
					</view> -->
				</view>
				<view class="right">
					<text>￥{{item.price}}</text>
					<text>x{{item.count}}</text>
				</view>
			</view>
			<view class="bot">
				<text class="splicingOrders" @tap.stop="handeClickFree(item)">发起免单助力</text>
			</view>
			<view class="bot1">
				下单时间:{{item.createTime}}
				<view class="">
					实付款
					<text>￥{{item.price}}</text>
				</view>
			</view>
		</view>
		<u-popup  z-index="10" round="20" mode="bottom" :show="data.show2" @close="()=>{data.show2 = false}">
			<view class="popup">
				<view class="popupTop">
					<image @tap="data.show2 = false" src="/static/img/index/101.png" mode="widthFix"></image>
				</view>
				<view class="popupType">
					<view class="" @tap="data.obj.shareType = 'ALL'">
						<text>公开-所有人可见</text>
						<image v-if="data.obj.shareType == 'ALL'" src="/static/img/freeShipping/13.png"
							mode="widthFix">
						</image>
					</view>
					<view class="" @tap="data.obj.shareType = 'FRIEND'">
						<text>好友可见</text>
						<image v-if="data.obj.shareType == 'FRIEND'" src="/static/img/freeShipping/13.png"
							mode="widthFix">
						</image>
					</view>
				</view>
				<view class="textarea">
					<textarea v-model="data.obj.remark" placeholder="选填,请输入您要备注的信息"></textarea>
				</view>
				<view class="bot">
					<text @tap="submit1">立刻发起</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { publishFreeOrder } from '@/utils/api/freeShipping'
	const props = defineProps(['list'])
	const emit = defineEmits(['success'])
	const data = reactive<any>({
		httpUrl: getApp().globalData.baseUrl,
		obj: { shareType: 'ALL' },
	})
	const handeClickFree = (item) => {
		data.show2 = true;
		data.obj.sonOrderNo = item.sonOrderNo
	}
	const submit1 = () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		publishFreeOrder({ data: data.obj }).then((res) => {
			if (res.code == 200) {
				emit('success',data.obj.sonOrderNo)
				data.show2 = false;
				uni.showToast({
					title:'发起成功!',
					icon:'none'
				})
			}else{
				uni.hideLoading()
			}
		})
	}
</script>

<style lang="scss">
	.orderList {
		.popup {
			background: #fff;
			border-radius: 24rpx 24rpx 0 0;
			padding-top: 26rpx;

			.popupTop {
				display: flex;
				justify-content: flex-end;
				padding: 0 32rpx;

				image {
					width: 42rpx;
				}
			}

			.popupType {
				padding: 0 32rpx;
				overflow: hidden;
				margin: 30rpx 0;

				>view:nth-of-type(1) {
					border-radius: 20rpx 20rpx 0 0;
				}

				>view:nth-of-type(2) {
					border-radius: 0 0 20rpx 20rpx;
				}

				>view {
					height: 96rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 24rpx;
					background: #F4F6FA;

					text {}

					image {
						width: 48rpx;
					}
				}
			}

			.textarea {
				padding: 0 32rpx;

				textarea {
					width: 100%;
					padding: 24rpx;
					background: #F4F6FA;
					border-radius: 20rpx;
					height: 300rpx;
				}
			}

			.bot {
				padding: 10rpx 32rpx 30rpx 32rpx;

				text {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 88rpx;
					height: 88rpx;
					background: #FF263F;
					font-size: 32rpx;
					color: #fff;
				}
			}
		}

		.orderListItem {
			background: #fff;
			padding: 24rpx;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
		}

		.bot {
			margin-top: 33rpx;
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;

			text {
				padding: 11rpx 24rpx;
				border-radius: 100rpx;
				color: #fff !important;
				border-color: #FF263F !important;
				background-color: #FF263F;
			}
		}

		.bot1 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #8C8C8C;
			margin-top: 25rpx;

			view {
				font-size: 24rpx;

				text {
					font-size: 36rpx;
					color: #6B64D3;
				}
			}
		}

		.listItem {
			display: flex;
			align-items: flex-start;
			margin-top: 24rpx;

			>.left {
				width: 160rpx;
				height: 160rpx;
				border-radius: 24rpx;
				background: #ccc;

				image {
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
				}
			}

			>.center {
				flex: 1;
				margin: 0 24rpx;
				width: 0;

				>text {
					width: 100%;
				}

				view {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #8C8C8C;
				}

				.attr {

					text {
						font-size: 24rpx;
						color: #8C8C8C;
						display: inline-block;
						margin-right: 10rpx;
					}
				}
			}

			>.right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				text:nth-of-type(1) {
					font-size: 24rpx;
					color: #595959;
				}

				text:nth-of-type(2) {
					font-size: 20rpx;
					color: #8C8C8C;
					margin-top: 10rpx;
				}
			}
		}

		.topItem {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				font-size: 32rpx;

				image {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.lxsj {
					padding: 5rpx 10rpx;
					border-radius: 100rpx;
					border: 2rpx solid #D9D9D9;
					margin-left: 10rpx;
				}
			}

			.right {
				color: #FF8C00;
			}
		}
	}
</style>